<template>
  <div class="childerBox pageWrapper">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="130" :model="formData" inline>
        <Card :bordered="true">
          <p slot="title">订单信息</p>
        <FormItem label="主订单号:" style="width:30%">
          <div class="orderList" @click="bandleChilder(formData.orderId)">{{formData.orderId}}</div>
        </FormItem>
        <FormItem label="子订单号:" style="width:30%">
          <div>{{formData.subOrderId}}</div>
        </FormItem>
        <FormItem label="源子订单号:" style="width:30%">
          <div class="orderList" @click="bandleOriginChilder(formData.originalSubOrderId)">{{formData.originalSubOrderId}}</div>
        </FormItem>
        <FormItem label="支付订单号:" style="width:30%">
          <div>{{formData.paymentId}}</div>
        </FormItem>
        <FormItem label="商品名称:" style="width:30%">
          <div>{{formData.productName}}</div>
        </FormItem>
        <FormItem label="业务商品编码:" style="width:30%">
          <div>{{formData.productCode}}</div>
        </FormItem>
          <FormItem label="中台商品编码:" style="width:30%">
            <div>{{formData.productId}}</div>
          </FormItem>
        <FormItem label="商品数量:" style="width:30%">
          <div>{{formData.productCount}}</div>
        </FormItem>
        <!-- <FormItem label="商品单价:" style="width:30%">
          <div>{{ formData.productCost ? `${formData.productCost / 100}元` : '0' }}</div>
        </FormItem> -->
        <FormItem label="应收金额:" style="width:30%">
          <div>{{ formData.subOrderAmount ? `${formData.subOrderAmount / 100}` : '0.00' }}</div>
        </FormItem>
        <FormItem label="支付金额:" style="width:30%">
          <div>{{formData.payAmount ? `${formData.payAmount / 100}` : '0.00'}}</div>
        </FormItem>
        <FormItem label="优惠总金额:" style="width:30%">
          <div>{{formData.discount ? `${formData.discount / 100}` : '0.00'}}</div>
        </FormItem>
        <FormItem label="商户名称:" style="width:30%">
          <div>{{formData.merchantName}}</div>
        </FormItem>
        <FormItem label="商户编码:" style="width:30%">
          <div>{{formData.merchantCode}}</div>
        </FormItem>
        <FormItem label="子订单状态:" style="width:30%">
          <Tag v-if="formData.subOrderStatus==='SC'" color="success">{{ formData.subOrderStatusCn }}</Tag>
          <Tag v-else-if="formData.subOrderStatus==='FL'" color="error">{{ formData.subOrderStatusCn }}</Tag>
          <Tag v-else color="warning">{{formData.subOrderStatusCn }}</Tag>
        </FormItem>
        <FormItem label="使用优惠券数量:" style="width:30%">
          <div>{{formData.couponNum}}</div>
        </FormItem>
        <FormItem label="业务渠道来源:" style="width:30%">
          <div>{{formData.orderSourceCn}}</div>
        </FormItem>
        <FormItem label="业务侧订单状态:" style="width:30%">
          <div>{{ formData.biz_status_name }}</div>
        </FormItem>
        <FormItem label="渠道支付订单号:" style="width:30%">
          <div>{{formData.flowId}}</div>
        </FormItem>
        <FormItem label="子订单创建时间:" style="width:30%">
          <div>{{formData.createdDt}}</div>
        </FormItem>
        <FormItem label="支付订单创建时间:" style="width:30%">
          <div>{{formData.payCreateTime}}</div>
        </FormItem>
        <FormItem label="交易时间:" style="width:30%">
          <div>{{formData.payTime}}</div>
        </FormItem>
        <FormItem label="是否使用优惠劵:" style="width:30%">
          <div>{{formData.isCoupon ? '是' : '否'}}</div>
        </FormItem>
        <FormItem label="商品详情:" style="width:30%">
          <div>{{formData.productDetail}}</div>
        </FormItem>
        </Card>

        <Card :bordered="true">
          <p slot="title">退款信息</p>
          <div v-for="(item, index) in formRefundsData" :key="index + item.refundId">
            <FormItem label="退款订单号：" style="width:30%">
                <div class="orderList" @click="bandleRefund(item.refundId)">{{ item.refundId }}</div>
            </FormItem>
            <FormItem label="渠道支付订单号：" style="width:30%">
                <div>{{ item.payFlowId }}</div>
            </FormItem>
            <FormItem label="渠道退款订单号：" style="width:30%">
                <div>{{ item.flowId }}</div>
            </FormItem>
            <FormItem label="申请退款金额：" style="width:30%">
                <div>{{ item.refundApplyAmount >= 0 ? `${item.refundApplyAmount / 100}元` : '' }}</div>
            </FormItem>
            <FormItem label="实际退款金额：" style="width:30%">
              <div style="color: green" v-if="item.refundStatus && item.refundStatus==='SC'">
                {{ item.refundAmount >= 0 ? `${item.refundAmount / 100}元` : '' }}
              </div>
              <div v-else>0 元</div>
            </FormItem>
            <FormItem label="退款创建时间：" style="width:30%">
                <div>{{ item.createdDt }}</div>
            </FormItem>
            <FormItem label="交易时间：" style="width:30%">
                <div>{{ item.refundTime }}</div>
            </FormItem>
            <FormItem label="退款状态：" style="width:30%">
              <Tag v-if="item.refundStatus && item.refundStatus==='SC'" color="success">退款成功</Tag>
              <Tag v-else-if="item.refundStatus && item.refundStatus==='FL'" color="error">退款失败</Tag>
              <Tag v-else-if="item.refundStatus && item.refundStatus==='IG'" color="warning">退款中</Tag>
              <Tag v-else color="default">无退款</Tag>
            </FormItem>
            <Divider dashed/>
          </div>
        </Card>

        <Card :bordered="true">
          <p slot="title">优惠劵信息</p>
        <div v-for="(item, index) in formCouponsData" :key="index">
          <FormItem label="是否有优惠:" style="width:30%">
            <div>{{item.isCoupon ? '是':'否'}}</div>
          </FormItem>
          <FormItem label="优惠总金额:" style="width:30%">
            <div>{{item.amount ? `${item.amount / 100}` : '0.00'}}</div>
          </FormItem>
          <FormItem label="优惠分摊金额:" style="width:30%">
            <div>{{item.discount ? `${item.discount / 100}` : '0.00'}}</div>
          </FormItem>
          <FormItem label="优惠劵类型:" style="width:30%">
            <div>{{item.couponTypeCn}}</div>
          </FormItem>
          <FormItem label="优惠劵名称:" style="width:30%">
            <div>{{item.couponName}}</div>
          </FormItem>
          <FormItem label="主订单下单标记:" style="width:30%">
            <div>{{item.couponTags}}</div>
          </FormItem>
          <FormItem label="优惠劵码:" style="width:30%">
            <div>{{item.couponCode}}</div>
          </FormItem>
          <!-- <FormItem label="优惠劵信息:" style="width:30%">
            <div>{{item.rawInfo}}</div>
          </FormItem> -->
          <FormItem label="计平优惠劵码:" style="width:30%">
            <div>{{item.midasCouponCode}}</div>
          </FormItem>
          <FormItem label="计平优惠劵批次号:" style="width:30%">
            <div>{{item.midasBatch}}</div>
          </FormItem>
          <FormItem label="优惠来源:" style="width:30%">
            <div>{{item.discountSourceCn}}</div>
          </FormItem>
          <Divider dashed/>
        </div>
        </Card>

        <!-- <FormItem prop="name" label="业务渠道来源:" style="width:30%">
          <Input type="text" v-model="formData.name" readonly />
        </FormItem>
        <FormItem prop="num" label="子订单状态:" style="width:30%">
          <Input type="text" v-model="formData.num" readonly />
        </FormItem>
        <FormItem prop="legalPersonName" label="商户名称:" style="width:30%">
          <Input type="text" v-model="formData.legalPersonName" readonly />
        </FormItem>
        <FormItem prop="contactsName" label="商品名称:" style="width:30%">
          <Input type="text" v-model="formData.contactsName" readonly />
        </FormItem>
        <FormItem prop="phone" label="商品数量:" style="width:30%">
          <Input type="text" v-model="formData.phone" readonly />
        </FormItem>
        <FormItem prop="email" label="应收金额:" style="width:30%">
          <Input type="text" v-model="formData.email" readonly />
        </FormItem>
        <FormItem prop="businessMobile" label="实付金额:" style="width:30%">
          <Input type="text" v-model="formData.businessMobile" readonly />
        </FormItem>
        <FormItem prop="bankName" label="优惠券名称:" style="width:30%">
          <Input type="text" v-model="formData.bankName" readonly />
        </FormItem>
        <FormItem prop="bankAccount" label="优惠来源:" style="width:30%">
          <Input type="text" v-model="formData.bankAccount" readonly />
        </FormItem>
        <FormItem prop="cityName" label="优惠金额:" style="width:30%">
          <Input type="text" v-model="formData.cityName" readonly />
        </FormItem>
        <FormItem prop="address" label="渠道优惠金额:" style="width:30%">
          <Input type="text" v-model="formData.address" readonly />
        </FormItem>
        <FormItem prop="state" label="收单优惠金额:" style="width:30%">
          <Select v-model="formData.state" readonly >
            <Option value="0">无效</Option>
            <Option value="1">有效</Option>
            <Option value="2">禁止开蓝票</Option>
            <Option value="3">禁止冲红</Option>
          </Select>
        </FormItem> -->
       <!-- <Authc permissions="invoice:taxpayerItems:query">
          <FormItem prop="items" label="商品列表:" style="width:90%">
            <ItemsListTable :taxpayerId="taxpayerId" />
          </FormItem>
        </Authc> -->
      </Form>
      <Button type="primary" @click="goBack">返回</Button>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../module/childModule";
import {InputNumber,Input,Button,Select,Form,FormItem,Message,Option} from "view-design";
import Loading from "@/components/Loading";
//import RemoteSelect from "@/components/RemoteSelect";
//import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
//import ItemsListTable from '../../taxpayerItems/ItemsListTable';
export default {
  components: {InputNumber,Loading,Input,Button,Form,FormItem,Message,
    SearchBar,SearchBarItem: SearchBar.SearchBarItem,Select,Option,Authc},
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.query.id;
    let response = await this.$store.dispatch(`${namespace}/getDetail`, id);
    if (response.errorCode === 0) {
      this.formData = response.data.subOrderDetailVO;
      this.formCouponsData = response.data.coupons
      this.formRefundsData=response.data.refunds||[]
      if (!response.data.coupons) {
        this.formCouponsData = [{isCoupon: ''}]
      }
    }
  },
  data: function() {
    let vm = this;
    return {
      taxpayerId: this.$route.params.id,
      formRef: Uuid.v1(),
      formData: {},
      formCouponsData: [],
      formRefundsData:[],
      columns: []
    };
  },
  methods: {
    // 主订单号
    bandleChilder (id) {
      this.$router.push({path: 'BlanketOrderDetailForm', query: {
          id: id
        }})
    },
    // 源子订单号
    bandleOriginChilder (id) {
      this.$router.push({path: 'ChildOrderDetailForm', query: {
          id: id
        }})
    },
    // 退款订单号
    bandleRefund (id) {
      this.$router.push({path: 'refundOrderDetailForm', query: {
          id: id
        }})
    },
    goBack () {
      this.$router.go(-1);
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  }
};
</script>

<style>
</style>

<style lang="less" scoped>
.childerBox{
  .title {
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .childerList{
    border-top: 1px solid #999;
    margin-top: 10px;
    word-break: break-all;
  }
  .orderList {
    color: blue;
    cursor: pointer;
  }
}
</style>
